<template>
    <layout>
        <template #header>
            <div class="header-nav-bar">
                <div class="display-flex header-nav-bar-top">
                    <div class="header-search">
                        <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
                            <template #action>
                                <van-button round size="small" type="success" color="#ED1850"
                                    @click="onClickButton">搜索</van-button>
                            </template>
                        </van-search>
                    </div>
                </div>
            </div>
            <product-navigation class="product-navigation" :menuList="menuList" />
        </template>
        <divide-title />
        <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedText" @load="loadMore"
            class="van-list-box">
            <van-row justify="space-around" :gutter="[10, 10]">
                <ProductBox v-for="item in list" :key="item.id" :item="item" />
            </van-row>
        </van-list>
    </layout>
</template>

<script setup>
import { ref, reactive } from 'vue';
import layout from '@/components/Layout/index.vue'
import ProductNavigation from '@/components/ProductNavigation/index.vue'
import DivideTitle from '@/components/DivideTitle/index.vue'
import ProductBox from '@/components/ProductBox/index.vue'

import ProductNavigation_01 from '@image/ProductNavigation/ProductNavigation_01.png'
import ProductNavigation_02 from '@image/ProductNavigation/ProductNavigation_02.png'
import ProductNavigation_03 from '@image/ProductNavigation/ProductNavigation_03.png'
import ProductNavigation_04 from '@image/ProductNavigation/ProductNavigation_04.png'
import ProductNavigation_05 from '@image/ProductNavigation/ProductNavigation_05.png'
import ProductNavigation_06 from '@image/ProductNavigation/ProductNavigation_06.png'
import ProductNavigation_07 from '@image/ProductNavigation/ProductNavigation_07.png'
import ProductNavigation_08 from '@image/ProductNavigation/ProductNavigation_08.png'
import ProductNavigation_09 from '@image/ProductNavigation/ProductNavigation_09.png'
import ProductNavigation_10 from '@image/ProductNavigation/ProductNavigation_10.png'
let menuList = ref([
    { text: '百货', path: '', image: ProductNavigation_01 },
    { text: '护肤', path: '', image: ProductNavigation_02 },
    { text: '日化', path: '', image: ProductNavigation_03 },
    { text: '家电', path: '', image: ProductNavigation_04 },
    { text: '酒水', path: '', image: ProductNavigation_05 },
    { text: '茶叶', path: '', image: ProductNavigation_06 },
    { text: '保健', path: '', image: ProductNavigation_07 },
    { text: '饰品', path: '', image: ProductNavigation_08 },
    { text: '家纺', path: '', image: ProductNavigation_09 },
    { text: '教育', path: '', image: ProductNavigation_10 },
])

let changeDropdown = (item) => {

    if (item.value == 'all') {
        dropdown.menuList.forEach(v => {
            v.checked = false;
            if (v.value == item.value) {
                v.checked = true;
            }
        })
    } else {
        dropdown.menuList.forEach(v => {
            if (v.value == 'all') {
                v.checked = false;
            }
            if (v.value == item.value) {
                v.checked = !v.checked;
            }
        })
    }

}

const value = ref('');
let finishedText = ref('--END--');
const onSearch = (val) => showToast(val);
const onClickButton = () => showToast(value.value);

const list = ref([
    {
        "id": 11,
        "name": "小蛮腰手链",
        "goods_images": [
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/58f9bcbe936c038544bc886fba84b796.jpg"
        ],
        "price": "139.00",
        "is_new": 0,
        "repertory_num": 0,
        "buy_num": 10,
        "content": "<p>轻奢ins风小众精致925银链<\/p><p><img src=\"https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/2d73983136fe2ede2ae7740bd6cc440f.jpg\" style=\"width: 469.984px;\" data-filename=\"filename\"><img src=\"https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/58f9bcbe936c038544bc886fba84b796.jpg\" style=\"width: 469.984px;\" data-filename=\"filename\"><br><\/p>",
        "images": [],
        "status": 1,
        "createtime": "2024-03-29 18:21:59",
        "updatetime": "2024-05-06 16:48:14"
    },
    {
        "id": 10,
        "name": "泰迪联名剃须刀",
        "goods_images": [
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/b43166a3ade515fd5163d875734f1a89.jpg"
        ],
        "price": "168.00",
        "is_new": 0,
        "repertory_num": 0,
        "buy_num": 492,
        "content": "<p>ShowSee\/小适&nbsp;电动便捷式剃须刀，泰迪联名潮玩礼盒F1-R<\/p><p><img src=\"https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/86a09167bea0ec268e595ae31e5f561f.jpg\" style=\"width: 469.984px;\" data-filename=\"filename\"><img src=\"https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/b43166a3ade515fd5163d875734f1a89.jpg\" style=\"width: 469.984px;\" data-filename=\"filename\"><br><\/p>",
        "images": [],
        "status": 1,
        "createtime": "2024-03-29 18:13:11",
        "updatetime": "2024-04-08 18:17:28"
    },
    {
        "id": 8,
        "name": "益米婴儿脚踏钢琴健身架",
        "goods_images": [
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/a0342b5d3f421f8704410550fa3593fb.jpg"
        ],
        "price": "199.00",
        "is_new": 0,
        "repertory_num": 0,
        "buy_num": 0,
        "content": "<p>婴幼儿学步玩具礼盒<\/p><p><img src=\"https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/d8df689e4e6dc94853cc1a43c35cf3fb.jpg\" style=\"width: 469.984px;\" data-filename=\"filename\"><br><\/p>",
        "images": [],
        "status": 1,
        "createtime": "2024-03-29 17:54:10",
        "updatetime": "2024-03-29 17:54:10"
    },
    {
        "id": 7,
        "name": "时尚新款母婴包",
        "goods_images": [
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/793999ea5b268f8055bc9633716c60b8.jpg"
        ],
        "price": "299.00",
        "is_new": 0,
        "repertory_num": 0,
        "buy_num": 0,
        "content": "<p>高质量大容量多功能防水出门轻便收纳，母婴包妈咪包。<img src=\"https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/d658f975c9160abf2082174f1e48a539.jpg\" style=\"width: 469.984px;\" data-filename=\"filename\"><img src=\"https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/4669896af1052549175a9418db783839.jpg\" style=\"width: 469.984px;\" data-filename=\"filename\"><img src=\"https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/21b4ada06bfc5303f4782dfdda690964.jpg\" style=\"width: 469.984px;\" data-filename=\"filename\"><\/p>",
        "images": [],
        "status": 1,
        "createtime": "2024-03-29 17:48:25",
        "updatetime": "2024-03-29 17:48:25"
    },
    {
        "id": 5,
        "name": "檀木匠恪丂纪念款",
        "goods_images": [
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/bd58ccec49b41e4be6345e5d01434691.jpg"
        ],
        "price": "288.00",
        "is_new": 0,
        "repertory_num": 0,
        "buy_num": 1405,
        "content": "<p><img src=\"https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/bd58ccec49b41e4be6345e5d01434691.jpg\" data-filename=\"filename\" style=\"width: 469.984px;\"><br><img src=\"https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/179e4df4002c94ddcf412e6dd66d7421.jpg\" style=\"width: 469.984px;\" data-filename=\"filename\"><img src=\"https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/305e3bf83914317372598d6430a4ae14.jpg\" style=\"width: 469.984px;\" data-filename=\"filename\"><\/p>",
        "images": [],
        "status": 1,
        "createtime": "2024-03-29 09:30:37",
        "updatetime": "2024-06-06 13:15:04"
    },
    {
        "id": 3,
        "name": "Marino Orlandi 时尚女包",
        "goods_images": [
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/a59307aefa2ce9e3282f8074fd1e4cfc.jpg"
        ],
        "price": "199.00",
        "is_new": 0,
        "repertory_num": 0,
        "buy_num": 6886,
        "content": "<p>时尚百搭经典国风国潮百搭通勤逛街包<\/p><p><img src=\"https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/171a0f49c606f674e5c75b4be2a20733.jpg\" style=\"width: 469.984px;\" data-filename=\"filename\"><img src=\"https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/a59307aefa2ce9e3282f8074fd1e4cfc.jpg\" style=\"width: 469.984px;\" data-filename=\"filename\"><br><\/p>",
        "images": [],
        "status": 1,
        "createtime": "2024-03-29 09:29:09",
        "updatetime": "2024-06-25 18:14:41"
    }
])

let loading = ref(false);
let finished = ref(false);
let loadMore = () => {
    setTimeout(() => {
        loading.value = false;   // 数据全部加载完成
        if (list.value.length >= 3) {   // 数据全部加载完成
            finished.value = true;
        }
    }, 1000);
}


</script>

<style lang="scss" scoped>
.header-nav-bar {
    height: 230px;
    background: linear-gradient(to right, var(--orange-color), var(--red-color));
    color: var(--white);

    :deep(.van-nav-bar__title) {
        color: var(--white);
    }

    ;

    :deep(.van-nav-bar) {
        background-color: transparent;
    }

    :deep(.van-notice-bar) {
        background-color: transparent;
    }

    :deep(.van-nav-bar .van-icon) {
        color: var(--white);
    }
}

.header-nav-bar-top {
    padding: 20px;
    margin-top: 20px;
}

.header-left {
    width: 95px;
    height: 80px;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-right {
    width: 58px;
    height: 80px;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;

}

.header-search {
    border-radius: 60px;
    background-color: var(--white);
    flex: 1;
    overflow: hidden;
    height: 80px;
    margin: 0 20px;

    :deep(.van-search) {
        background-color: transparent;
        height: 80px;
    }

    :deep(.van-search__content) {
        background: var(--white);
    }

    :deep(.van-button) {
        width: 140px;
        margin-top: -4px;
    }

    :deep(.van-search__action) {
        background: var(--white);
    }
}

.dropdown-bar {
    position: relative;
    z-index: 999;
    top: -40px;
    margin: 0 20px;
    border-radius: 5px;
    overflow: hidden;
}

.product-navigation {
    border-radius: 10px; margin: -80px 20px 20px 20px;
    overflow: hidden;
}

.van-list-box {
    margin-top: 20px;
}
</style>